const navMenu = document.querySelector('.nav-menu')
const navToggle = document.querySelector('.nav-toggle')
const navClose = document.querySelector('.nav-close')

if (navToggle) {
  navToggle.addEventListener('click', function () {
    navMenu.classList.add('show-menu')
  })
}

if (navClose) {
  navClose.addEventListener('click', function () {
    navMenu.classList.remove('show-menu')
  })
}

const navLink = document.querySelectorAll('.nav-link')

const linkAction = () => {
  const navMenu = document.querySelector('.nav-menu')
  navMenu.classList.remove('show-menu')
}

navLink.forEach(item => item.addEventListener('click', linkAction))

// swiper watches
const swiperWatches = new Swiper('.home-swiper', {
  loop: true,
  spaceBetween: 32,
  grabCursor: true,
  effect: 'creative',
  creativeEffect: {
    prev: {
      translate: [-100, 0, -500],
      rotate: [0, 0, 15],
      opacity: 0,
    },
    next: {
      translate: [100, 0, -500],
      rotate: [0, 0, -15],
      opacity: 0,
    },
  },

  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
})

// gsap animation
gsap.from('.home-images', 1.5, { opacity: 0, y: 150, delay: 0.1 })
gsap.from('.home-data', 1.8, { opacity: 0, x: -100, delay: 0.8 })
gsap.from('.home-info', 1.8, { opacity: 0, x: 100, delay: 1 })
